import { RbacRoleType } from '@/datatypes/rbacRole/data';
import type { RbacUserType } from '@/datatypes/rbacuser/data';
import { RbacUserStatusValueEnum } from '@/enums/auth';
import { list } from '@/services';
import { rbacRoleUrl } from '@/urls';
import { ProFormSelect, ProFormText, ProFormTextArea, StepsForm } from '@ant-design/pro-components';
import { Modal } from 'antd';
import React, { useEffect, useState } from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacUserType>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacUserType>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [roles, setRoles] = useState<RbacRoleType[]>([]);
  useEffect(() => {
    const fetchRolesData = async () => {
      const data: API.ListResult<RbacRoleType> = await list(rbacRoleUrl);
      setRoles(data?.list || []);
    };

    fetchRolesData();
  }, []);

  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            style={{
              padding: '32px 40px 48px',
            }}
            destroyOnClose
            title="更新管理员"
            open={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          username: props.values.username,
          remark: props.values.remark,
        }}
        title="基本信息"
      >
        <ProFormText
          name="username"
          label="用户名"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入用户名\t！',
            },
          ]}
        />

        <ProFormTextArea
          name="remark"
          width="md"
          label="备注"
          placeholder="请输入至少五个字符"
          rules={[
            {
              required: true,
              message: '请输入至少五个字符的备注！',
              min: 5,
            },
          ]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          mobile: props.values.mobile,
          email: props.values.email,
          realName: props.values.realName,
        }}
        title="高级属性"
      >
        <ProFormText
          name="mobile"
          label="电话号码"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入电话号码\t！',
            },
          ]}
        />
        <ProFormText
          name="realName"
          label="姓名"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入姓名\t！',
            },
          ]}
        />
        <ProFormText
          name="email"
          label="邮箱"
          width="md"
          rules={[
            {
              required: true,
              message: '请输入邮箱\t！',
            },
          ]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          status: props.values.status,
          roles: props.values.roleIdString ? props.values.roleIdString.split(',') : [],
        }}
        title="设置启用"
      >
        <ProFormSelect name="status" width="md" label="" valueEnum={RbacUserStatusValueEnum} />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '至少选择一个角色',
            },
          ]}
          width="md"
          name="roles"
          label={'角色'}
          mode="multiple"
          options={roles.map((role: RbacRoleType) => ({
            label: role.name,
            value: role.id,
          }))}
        />
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default UpdateForm;
